<script lang="ts" setup>
import { ref, computed } from 'vue'
import { useAddRoleStore } from '../../store/addRole';
import PermissionSelect from '../utils/permissionSelect.vue';
import { FormInstance } from 'element-plus'
import { useRoleListStore } from '../../store/roleList';
import role from '../../api/role'
import utils from '../../utils/utils';
const addRoleStore = useAddRoleStore()
const roleListStore = useRoleListStore()
const ruleFormRef = ref<FormInstance>();
const text = computed(() => {
    return addRoleStore.addRole.id !== '' ? '修改角色' : '新增角色'
})
function failedsubmit() {
    addRoleStore.setAddRoleNull()
    addRoleStore.setOpen(false)
}
const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.validate(async (valid) => {
        if (valid) {
            addRoleStore.addRole.time = utils.getCurrentTime()
            if (addRoleStore.addRole.id == '') {
                console.log(addRoleStore.addRole)
                await role.addRole(addRoleStore.addRole).then(res => {
                    if (res.data.code == 200) {
                        utils.showMessage(res.data.message, 'success', 2000)
                    } else {
                        utils.showMessage(res.data.message, 'error', 2000)
                    }
                }).catch(err => {
                    console.log(err)
                }).finally(() => {
                    addRoleStore.setOpen(false)
                })
            } else {
                console.log(addRoleStore.addRole)
                await role.updateRole(addRoleStore.addRole).then(res => {
                    if (res.data.code == 200) {
                        utils.showMessage(res.data.message, 'success', 2000)
                    } else {
                        utils.showMessage(res.data.message, 'error', 2000)
                    }
                }).catch(err => {
                    console.log(err)
                }).finally(() => {
                    addRoleStore.setOpen(false)
                    addRoleStore.setAddRoleNull()
                })
            }
            await role.getAllRole(roleListStore.pageNum, roleListStore.pageSize).then(res => {
                roleListStore.roleList = res.data.data.data
                roleListStore.total = res.data.data.total
            }).catch(err => {
                console.log(err)
            }).finally(() => {
                roleListStore.changeLoading()
            })
        }
    })
}
</script>
<template>
    <el-dialog v-model="addRoleStore.isOpen" :title="text" width="600" center>
        <el-form ref="ruleFormRef" :model="addRoleStore.addRole" label-width="80px" style="padding: 1rem;">
            <el-row :gutter="24">
                <el-col :span="12">
                    <el-form-item label="角色名称">
                        <el-input v-model="addRoleStore.addRole.roleName" placeholder="请输入角色名称"></el-input>
                    </el-form-item>
                    <el-form-item label="状态">
                        <el-radio-group v-model="addRoleStore.addRole.status">
                            <el-radio :value=1>正常</el-radio>
                            <el-radio :value=0>禁用</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="权限字符">
                        <el-input v-model="addRoleStore.addRole.roleKey" placeholder="请输入角色字符"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="权限">
                        <PermissionSelect />
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="备注">
                        <el-input type="textarea" v-model="addRoleStore.addRole.description"
                            placeholder="请输入描述"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="failedsubmit">取消</el-button>
                <el-button type="primary" @click="submitForm(ruleFormRef)">
                    提交
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>